{% extends "base_project.html" %}
{% load humanize static hc_extras %}

{% block title %}Gotify Integration for {{ site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1>Gotify</h1>

        <p>
        <a href="https://gotify.net/">Gotify</a> is an open-source, self-hosted
        push notification service. If you use or plan on using Gotify,
        you can can integrate it with your {{ site_name }} account in few simple steps.
        </p>

        <h2>Setup Guide</h2>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    Log into your Gotify instance, go to
                    <strong>Apps</strong>, and create a new application.
                </p>
                <p>
                    Pick a descriptive name and short description.
                    After creating the app, you can also upload an icon for it
                    (feel free to use <a href="{% absolute_site_logo_url %}">this one</a>).
                </p>
            </div>
            <div class="col-sm-6">
                <img class="ai-guide-screenshot" alt="Click create integration button"
                    src="{% static 'img/integrations/setup_gotify_1.png' %}" />
            </div>
        </div>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    After you have created the application, copy its
                    <strong>Token</strong>.
                </p>
            </div>
            <div class="col-sm-6">
                <img class="ai-guide-screenshot" alt="Create Healthchecks.io integration with details"
                    src="{% static 'img/integrations/setup_gotify_2.png' %}">
            </div>
        </div>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    Enter the URL of your Gotify server, and the
                    application token in the form below.
                    Save the integration, and you are done!
                </p>
            </div>
        </div>

        <h2>Integration Settings</h2>

        <form method="post" class="form-horizontal">
            {% csrf_token %}
            <div class="form-group {{ form.url.css_classes }}">
                <label for="url" class="col-sm-2 control-label">Gotify Server URL</label>
                <div class="col-sm-10">
                    <input
                        id="url"
                        type="text"
                        class="form-control"
                        name="url"
                        placeholder="https://"
                        value="{{ form.url.value|default:"" }}">

                    {% if form.url.errors %}
                    <div class="help-block">{{ form.url.errors|join:"" }}</div>
                    {% endif %}
                </div>
            </div>
            <div class="form-group {{ form.token.css_classes }}">
                <label for="token" class="col-sm-2 control-label">Application Token</label>
                <div class="col-sm-10">
                    <input
                        id="token"
                        type="text"
                        class="form-control"
                        name="token"
                        value="{{ form.token.value|default:"" }}">

                    {% if form.token.errors %}
                    <div class="help-block">{{ form.token.errors|join:"" }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">Save Integration</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}
